<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        #box {
            /* width: 100%; */
            /* background-color: rgb(232, 232, 232); */
            margin: 0 auto;
            /* margin-top: 50px; */
        }

        #bd1 {
            box-sizing: border-box;
            width: 1100px;
            margin: 0 auto;
            height: 100px;
            /* border: 1px solid black; */
            background: url("../../img/logo.png") no-repeat 30px 32px;
        }

        #bd1 img {
            position: relative;
            left: 700px;
            top: 33px;
            width: 35px;
            height: 30px;
            vertical-align: top;
            border: 1px solid rgb(124, 124, 124);
        }

        #sou {
            border: 1px solid rgb(144, 144, 144);
            position: relative;
            left: 700px;
            top: 33px;
            width: 35px;
            height: 30px;
            width: 200px;
        }

        #bd2 {
            width: 100%;
            height: 60px;
            background-color: rgb(35, 35, 35);
            overflow: hidden;

        }

        #bd2>ul {
            width: 1080px;
            height: 60px;
            margin: 0 auto;
        }

        #bd2>ul>li {
            float: left;
            width: 120px;
            height: 60px;
            text-align: center;
            line-height: 60px;
            color: #ffffff;
        }

        #bd3 {
            width: 1536px;
            height: 500px;
            background: url("https://picsum.photos/1536/500?random=1") no-repeat;
            overflow: hidden;
        }

        #bd4 {
            width: 1090px;
            margin: 0 auto;
            height: 250px;
        }

        #bd4>div {
            box-sizing: border-box;
            float: left;
            height: 250px;
            /* border: 1px solid black; */
        }

        .bd4p {
            overflow: hidden;
            font-size: 20px;
            margin: 27px 0 20px 10px;
        }

        #bd41 {
            width: 500px;
        }

        #bd42 {
            width: 350px;
            background-color: #e7e7e7;
        }

        #bd43 {
            width: 240px;
            background-color: #fbfbfb;
        }

        #bd41 li {
            margin: 0 0 5px 20px;
        }

        #bd41 span {
            float: right;
            margin-right: 10px;
        }

        #bd5 {
            height: 288px;
            width: 100%;
            /* margin: 0 auto; */
            background-color: #f5f5f5;
            overflow: hidden;
        }

        #bd51 {
            margin-top: 47px;
            width: 1054px;
            margin: 0 auto;
            height: 200px;
            background-color: #ffffff;
            /* width: ; */
        }

        #bd51>img {
            vertical-align: top;
            margin: 10px 0 0 10px;
        }

        #bd51>div {
            display: inline-block;
            box-sizing: border-box;
            /* border: 1px solid black; */
            width: 700px;
            margin: 10px 0 0 10px;
            height: 180px;
        }

        #bd5p1 {
            margin-top: 20px;
            font-size: 20px;
            font-weight: 300;
        }

        #bd5p2 {
            margin-top: 10px;
            font-size: 16px;
        }

        #bd5p3 {
            margin-top: 10px;
            text-align: justify;
            color: #a6a6a6;
        }

        #bd6 {
            width: 100%;
            height: 400px;
            background-color: #ffffff;
            margin-bottom: 20px;
        }

        #bd61 {
            height: 300px;
            width: 1099px;
            margin: 0 auto;
            box-sizing: border-box;
            /* border: 1px solid black; */
            overflow: hidden;
        }

        #bd6p {
            margin: 30px 0 10px 210px;
            font-size: 20px;

        }

        #bd61>div {
            float: left;
            width: 250px;
            height: 300px;
            box-sizing: border-box;
            /* border: 1px solid black; */
            background-color: #e7e7e7;
            margin: 0 12px 0 12px;
        }

        #bd61>div>img {
            display: block;
            margin: 10px auto 0px auto;
            border-radius: 50%;
        }

        #bd61>div p {
            font-size: 16px;
            text-align: center;
        }

        .bd6p1 {
            margin-bottom: 10px;
        }

        .bd6p2 {
            font-size: 16px;
            color: #ffffff;
            background-color: #4e9bd5;
            width: 150px;
            margin: 0 auto;
            margin-bottom: 10px;
        }

        .bd6p3 {
            font-size: 14px;
            color: #a6a6a6;
            text-align: justify;
        }

        #bd7 {
            width: 100%;
            background-color: #232323;
            box-sizing: border-box;
            border: 1px solid transparent;
            height: 300px;
        }

        #bd7>p {
            text-align: center;
            color: #c0c0c0;
        }

        #bot1 {
            margin-top: 100px;
        }

        #bot2 {
            margin-top: 20px;
        }
    </style>
</head>

<body>
    <div id="box">
        <div id="bd1"><input id="sou" placeholder="请输入您的关键词"><img src="../../img/搜索.png"></div>
        <div id="bd2">
            <ul>
                <li>考试认证</li>
                <li>前端开发</li>
                <li>编程语言</li>
                <li>软件测试</li>
                <li>电商设计</li>
                <li>其他的课程</li>
                <li>新闻资讯</li>
                <li>人力资源</li>
                <li>联系我们</li>
            </ul>
        </div>
        <div id="bd3">

        </div>
        <div id="bd4">
            <div id="bd41">
                <p class="bd4p">动态新闻</p>
                <ul>
                    <li>培养HTML5人才过万机构，4次推动行业课程升级<span>2019-05-24</span></li>
                    <li>打造“前端+后湾+移动端”全栈工程师。<span>2019-05-24</span></li>
                    <li>扣丁学堂HTML5培训详解WebSocket跨域问题解决<span>2019-05-24</span></li>
                    <li>好程序员2期平均薪资10896元5596月薪过万<span>2019-05-24</span></li>
                    <li>中20天做出坦克大战、100天完成亿级秒杀系统<span>2019-05-24</span></li>
                    <li>2019千锋教研院“C-plus”战略三大亮点抢先看<span>2019-05-24</span></li>
                </ul>
            </div>
            <div id="bd42">
                <p class="bd4p">关于扣丁</p>
                <p style="margin: 20px 0 0 20px; color: #a6a6a6; text-align: justify;">扣丁学堂是千锋教育集团旗下工在线教育品牌，秉承用良心
                    做教育”的理念，旨在让学员通过在线学习的方式实现IT梦...</p>
                <p style="margin: 50px 0 0 20px; color: #2e2e2e; text-align: justify;">“扣丁"一词是英文CODING的谐音,意为编码的意思...</p>
            </div>
            <div id="bd43">
                <p class="bd4p">人才招聘</p>
                <p style="margin: 50px 0 0 10px; color: #2e2e2e; text-align: justify;">培养一流的人才，铸造一流的工程实现员工与企业的共同发展</p>
                <span
                    style="text-align: center;display: inline-block; border-radius: 10px; margin: 50px 0 0 10px; color: #ffffff; background-color: #a6a6a6;">MORE</span>
            </div>
        </div>
        <div id="bd5">
            <div id="bd51">
                <img src="https://picsum.photos/300/180?random=1">
                <div>
                    <p id="bd5p1">H T M L 大前端开发</p>
                    <p id="bd5p2">月薪: <span style="color: #4e9bd5;">10-15K</span><span>查看就业情况</span></p>
                    <p id="bd5p3">全栈HTML5+web前端开发培训工程师体系课程，通过一
                        系列由入门到实战项目系列由入门到实战项目系列由入门实战项目系列由入门
                        到实战项目系列由入门到实战项目，掌握前端工程师所需技能，学习前后端开发
                        关键技术、特效高级实战、企业级应用，更有微信小程序开发，成为…</p>
                </div>
            </div>
        </div>
        <div id="bd6">
            <p id="bd6p">面授名师</p>
            <hr width="1100px" size="1" noshade="none" style="margin: 0 auto; margin-bottom: 20px;">
            <div id="bd61">
                <div>
                    <img src="https://picsum.photos/150/150?random=1">
                    <p class="bd6p1">沈老师</p>
                    <p class="bd6p2">股上市公司发</p>
                    <p class="bd6p3">不想写了啊大大啊 爱国</p>
                </div>
                <div>
                    <img src="https://picsum.photos/150/150?random=2">
                    <p class="bd6p1">季老师</p>
                    <p class="bd6p2">阿嘎嘎嘎发</p>
                    <p class="bd6p3">不想写了啊大大啊 爱国</p>
                </div>
                <div>
                    <img src="https://picsum.photos/150/150?random=3">
                    <p class="bd6p1">飞老师</p>
                    <p class="bd6p2">那啥啊发生时</p>
                    <p class="bd6p3">不想写了啊大大啊 爱国</p>
                </div>
                <div>
                    <img src="https://picsum.photos/150/150?random=4">
                    <p class="bd6p1">田老师</p>
                    <p class="bd6p2">或离开法人啊</p>
                    <p class="bd6p3">不想写了啊大大啊 爱国</p>
                </div>
            </div>
        </div>
        <div id="bd7">
            <p id="bot1">真不写了</p>
            <p id="bot2">啊饭卡嘎嘎嘎的嘎达嘎达</p>
        </div>
    </div>
</body>

</html>